﻿<template>
    <div class="busGoods-container">
        <el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
                <el-row :gutter="35">
                    <el-form-item v-show="false">
                        <el-input v-model="ruleForm.id" />
                    </el-form-item>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="编码" prop="goodCode">
                            <el-input  v-model="ruleForm.goodCode"
                                placeholder="请输入编码" clearable />

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="名称" prop="goodName">
                            <el-input v-model="ruleForm.goodName" placeholder="请输入名称" clearable show-word-limit   maxlength="128"/>

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="单价" prop="unitAmount">
                            <el-input v-model="ruleForm.unitAmount" placeholder="请输入单价" clearable />

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="量纲(单位)" prop="unit">
                            <el-select clearable filterable v-model="ruleForm.unit" placeholder="请选择量纲(单位)">
                                <el-option v-for="(item, index) in sysClassDropdownList" :key="index" :value="item.value"
                                    :label="item.label" />

                            </el-select>

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商品标签" prop="flag">
                            <el-select clearable filterable v-model="ruleForm.flag" multiple placeholder="请选择商品标签">
                                <el-option v-for="(item, index) in sysClassFlagDropdownList" :key="index"
                                    :value="item.value" :label="item.label" />

                            </el-select>

                        </el-form-item>

                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物料编码" prop="productCode">
                            <el-select clearable filterable v-model="ruleForm.productCode" placeholder="请选择物料编码"
                                @change="changebad">
                                <el-option v-for="(item, index) in busProductDropdownList" :key="index" :value="item.value"
                                    :label="item.label" />

                            </el-select>

                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否上架" prop="online">
                            <el-select clearable v-model="ruleForm.online" placeholder="请选择是否上架">
                                <el-option v-for="(item, index) in  getEditonlineData" :key="index" :value="item.code"
                                    :label="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="供货商" prop="supCode">
                            <el-select clearable filterable v-model="ruleForm.supCode" placeholder="供货商">
                                <el-option v-for="(item, index) in getBusGoodSupplierList" multiple :key="index"
                                    :value="item.value" :label="item.label" />

                            </el-select>

                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="商品描述" prop="remark">
                            <!-- <el-input v-model="ruleForm.remark" placeholder="商品描述" clearable /> -->
                            <el-input type="textarea" :rows="2" placeholder="商品描述" v-model="ruleForm.remark"> </el-input>
                        </el-form-item>

                    </el-col>

                    <el-divider border-style="dashed" content-position="center">
                        <div style="color: #b1b3b8">商品默认图</div>
                    </el-divider>
                    <el-col>

                        <el-form-item label="商品默认图" prop="dataMRT">
                            <el-upload ref="uploadRef" class="upload-MRT" action="#" :http-request="uploadFileMRT"
                                :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>


                        <div class="block">
                            <span class="demonstration">默认图</span>
                            <!-- <el-image :src="urlMRT">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image> -->
                            <el-upload action="#" :http-request="uploadFileSJWJ" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            </el-upload>
                        </div>
                    </el-col>
                    <el-divider border-style="dashed" content-position="center">
                        <div style="color: #b1b3b8">商品详情轮播图</div>
                    </el-divider>
                    <el-col>
                        <el-form-item label="商品轮播图" prop="dataLBT">
                            <el-upload ref="uploadRef" class="upload-LBT" action="#" :http-request="uploadFileLBT"
                                :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>

                        <div class="block">
                            <span class="demonstration">轮播图</span>
                            <!-- <el-image :src="urlMRT">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image> -->
                            <el-upload action="#" :http-request="uploadFileLBT" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            </el-upload>
                        </div>

                    </el-col>
                    <el-divider border-style="dashed" content-position="center">
                        <div style="color: #b1b3b8">商品设计文件</div>
                    </el-divider>
                    <el-col>
                        <el-form-item label="商品设计文件" prop="dataSJWJ">
                            <el-upload ref="uploadRef" class="upload-SJWJ" action="#" :http-request="uploadFileSJWJ"
                                :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-divider border-style="dashed" content-position="center">
                        <div style="color: #b1b3b8">订单设计文件</div>
                    </el-divider>
                    <el-col>
                        <el-form-item label="订单设计文件" prop="dataOSJWJ">
                            <el-upload ref="uploadRef" class="upload-OSJWJ" action="#" :http-request="uploadFileOSJWJ"
                                :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-divider border-style="dashed" content-position="center">
                        <div style="color: #b1b3b8">商品属性</div>
                    </el-divider>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-button icon="ele-Plus" type="primary" plain @click="addProductAttributeRow"> 增加商品属性</el-button>
                    </el-col>
                    <el-col :xs="36" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
                        <template v-if="productAttrList && productAttrList.length > 0">
                            <el-row :gutter="35" v-for="(v, k) in productAttrList" :key="k">
                                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                    <el-form-item label="商品属性"
                                        :rules="[{ required: true, message: `商品属性不能为空`, trigger: 'blur' }]">
                                        <template #label>
                                            <el-button icon="ele-Delete" type="danger" circle plain size="small"
                                                @click="deleteProductAttributeRow(k)" />
                                        </template>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                            <el-form-item label="商品属性">
                                                <linkSelect placeholder="请选择商品属性" v-model="v.attr"
                                                    :options="busAttributeDropdown"
                                                    @change="getBusGoodsAttributeDropdownValue" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                            <el-form-item label="属性值" prop="aValue">
                                                <linkSelect placeholder="请选择属性值" v-model="v.value"
                                                    :options="BusGoodsAttributeDropdownValueList" />
                                            </el-form-item>
                                        </el-col>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                        </template>
                        <el-empty :image-size="30" description="空数据" v-else></el-empty>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { addBusGoods, updateBusGoods, getSysClassDropdown, getBusProductDropdown, GetSysClassFlagDropdown } from "/@/api/main/busGoods";
import { BusAttributeDropdown, BusGoodsAttributeDropdownValue, getBusAttributeDropdownF, getBusGoodSupplier } from '/@/api/main/busGoods';
import { getDictDataList } from '/@/api/system/admin';


import { productAttributeEffect, productAttrRowEffect } from '/@/api/main/BusGoodsDialog';
import { storeToRefs } from 'pinia';
import { useBusProduct } from '/@/stores/busGoods';
import linkSelect from '/@/components/BaseSelect/linkSelect.vue';
import BaseSelectItem from '/@/components/BaseSelect/index.vue';
import { SysFileApi } from '/@/api-services/api';
import { getAPI } from '/@/utils/axios-utils';
import { it } from "node:test";
import { FileOutput } from "/@/api-services";
import type { UploadProps, UploadUserFile } from 'element-plus'
// import { Flag } from "@element-plus/icons-vue/dist/types";

setTimeout(() => {

}, 5000);
const getEditonlineData = ref<any>([]);
//父级传递来的参数
var props = defineProps({
    title: {
        type: String,
        default: "",
    },
    goodCode: {
        type: String,
        default: '',
    },
    productCode: {
        type: String,
        default: '',
    },
});
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
const productName = ref<any>("");
//自行添加其他规则
const rules = ref<FormRules>({
});
const filesInfo = ref<any>([]);
const store = useBusProduct();
const { productAttrList, productAttrRowList } = storeToRefs(store);

const { addProductAttributeRow, deleteProductAttributeRow } = productAttributeEffect();
// const { addProductAttrRow, deleteProductAttrRow } = productAttrRowEffect();
const beforeUpload = (rawFile: any) => {
    const isLt2M = rawFile.size / 1024 / 1024 < 10;
    if (!isLt2M) {
        alert('上传头像图片大小不能超过 10MB!');
    }
}
// 打开弹窗
const openDialog = (row: any, isUpdate: any) => {

    if (isUpdate == "1") {
		ruleForm.value = JSON.parse(JSON.stringify(row));
		console.log(JSON.parse(JSON.stringify(row)));
	}
    isShowDialog.value = true;
    if (row.goodCode == null) {
        GetBusGoodSupplier(props.goodCode);
        getSysClassFlagDropdownList(props.goodCode);
    } else {
        GetBusGoodSupplier(row.goodCode);
        getSysClassFlagDropdownList(row.goodCode);
    }

   

};



// 关闭弹窗
const closeDialog = () => {


    emit("reloadTable");
    isShowDialog.value = false;

    productAttrList.value.length = 0;//属性名//属性值
    filesInfo.value.length = 0;//
    ruleForm.value.flag.length = 0;
    filesInfo.value = null;
};

// 取消
const cancel = () => {

    isShowDialog.value = false;
    productAttrList.value.length = 0;//属性名//属性值
    filesInfo.value.length = 0;//
    ruleForm.value.flag.length = 0;
    filesInfo.value = null;
};
// 提交
const submit = async () => {
    const attriValue = ref<any>([]);
    const filesInfos = ref<any>([]);
    const flagList = ref<any>([]);
    productAttrList.value.forEach((item: any) => attriValue.value.push({ aNames: item.attr, aValues: item.value }));//属性名//属性值
    filesInfo.value.forEach((item: any) => filesInfos.value.push({ fileName: item.fileName, filePath: item.filePath, fileFlag: item.suffix }));//
    flagList.value = ruleForm.value.flag;
    // console.log(flagList.value)
    ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
        if (isValid) {
            let values = ruleForm.value;
            console.log(values);
            if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
                await updateBusGoods({
                    id: ruleForm.value.id,
                    goodCode: ruleForm.value.goodCode,
                    goodName: ruleForm.value.goodName,
                    unitAmount: ruleForm.value.unitAmount,
                    unit: ruleForm.value.unit,
                    productCode: ruleForm.value.productCode,
                    ononline: ruleForm.value.on,
                    remark: ruleForm.value.remark,
                    // flag:ruleForm.value.flag,
                    goodFlags: flagList.value,
                    attributeKeys: attriValue.value,
                    filesInfos: filesInfos.value,
                    supCode: ruleForm.value.supCode,
                    online:ruleForm.value.on
                });
            } else {
                await addBusGoods({

                    goodCode: ruleForm.value.goodCode,
                    goodName: ruleForm.value.goodName,
                    unitAmount: ruleForm.value.unitAmount,
                    unit: ruleForm.value.unit,
                    productCode: ruleForm.value.productCode,
                    ononline: ruleForm.value.on,
                    remark: ruleForm.value.remark,
                    // flag:ruleForm.value.flag,
                    goodFlags: flagList.value,
                    attributeKeys: attriValue.value,
                    filesInfos: filesInfos.value,
                    supCode: ruleForm.value.supCode,
                    online:ruleForm.value.on
                });
            }
            closeDialog();
        } else {
            ElMessage({
                message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
                type: "error",
            });
        }
    });
};

//移除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//预览
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const dictTypeDataList = async (val: any) => {
    let list = await getDictDataList(val);
    return list.data.result ?? [];
};

const sysClassDropdownList = ref<any>([]);
const getSysClassDropdownList = async () => {
    let list = await getSysClassDropdown();
    sysClassDropdownList.value = list.data.result ?? [];
};
getSysClassDropdownList();

const sysClassFlagDropdownList = ref<any>([]);
const getSysClassFlagDropdownList = async (value: any) => {
    let list = await GetSysClassFlagDropdown({ p1: value });
    sysClassFlagDropdownList.value = list.data.result ?? [];
};


const busProductDropdownList = ref<any>([]);
const getBusProductDropdownList = async () => {
    let list = await getBusProductDropdown();
    busProductDropdownList.value = list.data.result ?? [];
};
getBusProductDropdownList();

const busAttributeDropdownList = ref<any>([]);
const getBusAttributeDropdownList = async (value: any) => {
    let list = await getBusAttributeDropdownF({ p1: value });
    busAttributeDropdownList.value = list.data.result ?? [];
};
const changebad = async (value: any) => {
    getBusAttributeDropdown(value);
}

const changepd = async (value: any) => {
    for (let index = 0; index < busProductDropdownList._rawValue.length; index++) {
        if (busProductDropdownList._rawValue[index].value == value)
            ruleForm.value.productName = busProductDropdownList._rawValue[index].label;
    }
};

const busAttributeDropdown = ref<any>([]);
const getBusAttributeDropdown = async (value: any) => {
    let lst = await BusAttributeDropdown({ p1: value });
    busAttributeDropdown.value = lst.data.result ?? [];
};

const BusGoodsAttributeDropdownValueList = ref<any>([]);
const getBusGoodsAttributeDropdownValue = async (value: any) => {
    let list = await BusGoodsAttributeDropdownValue({ p1: value });

    BusGoodsAttributeDropdownValueList.value = list.data.result ?? [];
}
getBusAttributeDropdown(null);
getBusGoodsAttributeDropdownValue(null);

const getBusGoodSupplierList = ref<any>([]);
const GetBusGoodSupplier = async (value: any) => {
    let lst = await getBusGoodSupplier({ p1: value });
    getBusGoodSupplierList.value = lst.data.result ?? [];
};


// 页面加载时
onMounted(async () => {
    getEditonlineData.value = await dictTypeDataList('data_yes_no');
});

let fits: ['fill', 'contain', 'cover', 'none', 'scale-down'];
let urlMRT: string | null | undefined;
const uploadFileMRT = async (value: any, valuetype: any) => {
    console.log(value.file);
    var res = await getAPI(SysFileApi).apiSysFileUploadFileForFlagPostForm(value.file, "GOODMRT");
    urlMRT = res.data.result?.url;
    console.log(urlMRT);
    filesInfo.value.push(res.data.result);

}
const uploadFileLBT = async (value: any, valuetype: any) => {
    var res = await getAPI(SysFileApi).apiSysFileUploadFileForFlagPostForm(value.file, "GOODXQLBT");
    filesInfo.value.push(res.data.result);

}

const uploadFileSJWJ = async (value: any, valuetype: any) => {
    var res = await getAPI(SysFileApi).apiSysFileUploadFileForFlagPostForm(value.file, "GOODSJWJ");
    filesInfo.value.push(res.data.result);
}

const uploadFileOSJWJ = async (value: any, valuetype: any) => {
    var res = await getAPI(SysFileApi).apiSysFileUploadFileForFlagPostForm(value.file, "OrderSJWJ");
    filesInfo.value.push(res.data.result);
}



//将属性或者函数暴露给父组件
defineExpose({ openDialog });


</script>




